<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部标题 -->
    <div class="bg-white shadow-sm">
      <div class="px-4 py-3">
        <h1 class="text-xl font-bold text-gray-800">养生指南</h1>
        <p class="text-sm text-gray-600 mt-1">关爱35+女性的健康生活</p>
      </div>
    </div>

    <!-- 轮播图 -->
    <div class="mx-4 mt-4">
      <van-swipe :autoplay="3000" indicator-color="white" class="rounded-lg overflow-hidden">
        <van-swipe-item v-for="item in banners" :key="item.id">
          <img :src="item.image" class="w-full h-48 object-cover" :alt="item.title" />
          <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4">
            <h3 class="text-white font-medium">{{ item.title }}</h3>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 功能卡片 -->
    <div class="mx-4 mt-6 grid grid-cols-2 gap-4">
      <div 
        v-for="feature in features" 
        :key="feature.name"
        class="bg-white rounded-lg p-4 shadow-sm"
        @click="$router.push(feature.path)"
      >
        <div class="text-center">
          <van-icon :name="feature.icon" size="32" class="text-pink-500" />
          <p class="text-sm mt-2 text-gray-700">{{ feature.name }}</p>
        </div>
      </div>
    </div>

    <!-- 推荐文章 -->
    <div class="mx-4 mt-6">
      <h2 class="text-lg font-bold text-gray-800 mb-3">推荐文章</h2>
      <div class="space-y-3">
        <div 
          v-for="article in articles.slice(0, 3)" 
          :key="article.id"
          class="bg-white rounded-lg p-4 shadow-sm"
          @click="viewArticle(article)"
        >
          <div class="flex">
            <img 
              :src="article.coverImage || '/placeholder-image.jpg'" 
              class="w-20 h-20 rounded-lg object-cover"
              :alt="article.title"
            />
            <div class="ml-3 flex-1">
              <h3 class="font-medium text-gray-800 line-clamp-2">{{ article.title }}</h3>
              <p class="text-xs text-gray-500 mt-1">{{ article.category }}</p>
              <p class="text-xs text-gray-400 mt-1">{{ formatDate(article.createdAt) }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <van-tabbar v-model="activeTab" route>
      <van-tabbar-item 
        v-for="route in routes" 
        :key="route.name"
        :to="route.path"
        :icon="route.meta.icon"
      >
        {{ route.meta.title }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useHealthStore } from '@/stores/health'
import { useRouter } from 'vue-router'
import routes from '@/router/index'

const healthStore = useHealthStore()
const router = useRouter()
const activeTab = ref(0)

const articles = computed(() => healthStore.articles)

const banners = ref([
  {
    id: 1,
    title: '35+女性养生黄金法则',
    image: 'https://via.placeholder.com/400x200/FFB6C1/FFFFFF?text=养生法则'
  },
  {
    id: 2,
    title: '更年期调理全攻略',
    image: 'https://via.placeholder.com/400x200/FF69B4/FFFFFF?text=更年期调理'
  },
  {
    id: 3,
    title: '每日养生小贴士',
    image: 'https://via.placeholder.com/400x200/DB7093/FFFFFF?text=养生贴士'
  }
])

const features = ref([
  { name: '健康记录', icon: 'records-o', path: '/health' },
  { name: '经期日历', icon: 'calendar-o', path: '/menstrual' },
  { name: '养生文章', icon: 'newspaper-o', path: '/' },
  { name: '个人中心', icon: 'user-o', path: '/profile' }
])

const viewArticle = (article) => {
  // 这里可以跳转到文章详情页
  console.log('查看文章:', article.title)
}

const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}
</script>
